//搜索栏

<template>
    <div>
        <el-select 
        class="search_field" 
        placeholder="搜索类型" 
        v-model="selected_field" 
        :searchFields="searchFields"
        @change="selectField"
        >
            <div v-for="(field, n) in searchFields" v-bind:key="n">
                <el-option :label= "field" :value= "field"></el-option>
            </div>
        </el-select >
        <el-input 
        :placeholder="placeholder" 
        v-model="input" 
        class="search_input"
        >
            <el-button 
            slot="append" 
            icon="el-icon-search" 
            class="search_button"
            @click="searchKeywords"
            >
            </el-button>
        </el-input>
    </div>
</template>

<script>
export default {
    data() {
        return{
            input:'',
            selected_field:'',
            field_visible: true
        }
    },
    props: {
        placeholder:{
            type: String,
            default: '请输入'
        },
        searchFields:{
            type: Array,
            default: ['']
        },
    },
    methods: {
        selectField: function(){
            console.log("搜索类型:"+this.selected_field)
            this.$emit('selectField',this.selected_field)
        },
        searchKeywords: function(){
            console.log("搜索："+this.input)
            this.$emit('goSearch',this.input)
        }
    }
}
</script>

<style>
.search_field{
    width:20%;
    float:left;
    margin-right:4px;
}
.search_input {
    width: 57%;
    font-size:16px;
    float:left;
}
.search_button {
    color:rgba(162, 143, 202, 0.7);
    font-size:18px;
    padding-right:10px;
    padding-left:10px;
}
</style>